<template>
  <div class="address-manage">
    <dynamicEditTable
      ref="dynamicEditTableRef"
      v-model="addressList"
      :list-setting="listSetting"
      :is-edit="true"
      :show-add-icon="true"
      :show-copy-btn="false"
      :add-btn-style="{
        height:'30px',width:'93px',padding: '0 8px',background: '#fff',fontSize: '14px',color: '#406eff',
        position: 'absolute',right: '0px',top: showMobilePage ? '0' : '-52px',border: '1px solid #406eff', fontWeight: 'bold'
      }"
      can-empty
      btn-text="添加地址"
    />
  </div>
</template>

<script>
// components
import dynamicEditTable from '@/components/Common/dynamicEditTable';
export default {
  components: {
    dynamicEditTable
  },
  model: {
    prop: 'addressList',
    event: 'changeValue'
  },
  props: {
    addressList: {
      type: Array,
      default: () => []
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    listSetting() {
      const arr = [
        { label: '联系人', type: 'inputText', maxlength: 50, width: '160px', keyword: 'contacts' },
        { label: '联系电话', type: 'inputText', maxlength: 20, width: '160px', keyword: 'phoneNo' },
        { label: '省市', type: 'selectCity', maxlength: 50, selectType: 'region', width: '160px', placeholder: '省市', keyword: 'province' },
        { label: '详细地址', type: 'inputText', maxlength: 200, width: '130px', keyword: 'address' },
        { label: '备注', type: 'inputText', maxlength: 500, width: '160px', keyword: 'remark' }
      ];
      return arr;
    }
  }
};
</script>

<style lang="scss" scoped>
.address-manage {
  position: relative;
  &::v-deep {
  .dynamic-container {
      margin-top: 12px !important;
    }
  }
}
</style>
